<template>
    <div>
        <div class="crumbs">
            <div class="contentbox">
                <div class="contentsize">委托运营编辑</div>
                <!-- <div class="contentsize">{{form.glfs }}编辑</div> -->
                <div>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="addtitle">房屋信息</div>
            <div class="detailcontent">
                <!-- scope.row.beginTime == null ? '' : scope.row.beginTime.trim().split(' ')[0] -->
                <div class="detailitem1">{{ projectdetail.fwdz }}</div>
                <div class="detailitem">产权单位：{{ projectdetail.cqdw }}</div>
                <div class="detailitem">管房单位：{{ projectdetail.gfdw }}</div>
                <div class="detailitem">产别：{{ projectdetail.cb }}</div>
                <div class="detailitem">建筑面积：{{ projectdetail.jzmj }}</div>
                <div class="detailitem">总层数：{{ projectdetail.zlc }}</div>
                <div class="detailitem">所在层数：{{ projectdetail.lc }}</div>
                <div class="detailitem">建筑年代：{{ projectdetail.jznd }}</div>
                <div class="detailitem"></div>
            </div>
            <div class="addtitle">经营方式</div>
            <el-form ref="form" :model="form" label-width="120px" :inline="true" label-position="top" :rules="rules">
                <el-form-item label="管理方式:" style="width: 30%" prop="glfs">
                    <el-select v-model="form.glfs" placeholder="请选择管理方式" style="width: 100%;" @change="getvalue($event)">
                        <el-option v-for="item in glfslist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="受委托单位:" style="width: 30%" prop="wtdw" v-if="wtglshow">
                    <el-select v-model="form.wtdw" placeholder="请选择受委托单位" style="width: 100%;">
                        <el-option v-for="item in wtdwlists" :key="item.id" :label="item.dwmc" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="委托单位:" style="width: 30%" prop="stgldw" v-if="wtglshow">
                    <!-- <el-input v-model="form.stgldw" placeholder="请输入委托单位" class="search-input"></el-input> -->
                    <el-select v-model="form.stgldw" placeholder="请选择产权单位" style="width: 100%">
                        <el-option v-for="item in cqdwlist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="起始时间:" style="width: 30%" prop="qsrq" v-if="wtglshow">
                    <el-date-picker type="date" placeholder="选择起始时间" v-model="form.qsrq" style="width: 100%"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="终止时间:" style="width: 30%" prop="zzrq" v-if="wtglshow">
                    <el-date-picker type="date" placeholder="选择终止时间" v-model="form.zzrq" style="width: 100%"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="分成比例:" style="width: 30%" prop="fcbl" v-if="wtglshow">
                    <el-input v-model="form.fcbl" placeholder="请输入分成比例" class="search-input"></el-input>
                </el-form-item>
                <el-form-item label="备注:" style="width: 100%" prop="note">
                    <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入备注" v-model="form.note"
                        style="width: 100%;">
                    </el-input>
                </el-form-item>
                <!-- 是否支持多文进上传 multiple -->
                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'" :on-remove="handleRemoves"
                    :before-remove="beforeRemoves" multiple :on-success="handelfilesuccess" :headers="myHeaders"
                    :file-list="filefileList">
                    <div class="unloadTitle">附件</div>
                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>
                <div style="display: flex; margin-top: 20px">
                    <div style="text-align: center; margin-right: 10px; cursor: pointer;width: 100px;"
                        v-for="(item, index) in fromlist" :key="index" class="filebox">
                        <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px"
                            @click="downloadfile(item.id, item.name, item.suffix)" />
                        <div class="fileboxitem">{{ item.name }}</div>
                        <div class="el-icon-delete-solid deleteitem" @click="deletefile(index)"></div>
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
import { builddetail, roomdetails, jyglupdate, download, jygldetail, wtdwlist } from '@/api/index';
import global from '@/components/common/httpurl.vue'
import valueList from '@/components/common/valueList.vue'
export default {
    name: 'wtjyedit',
    data() {
        return {
            wtglshow: false,//委托管理显示内容
            httpUrl: global.httpUrl,//公共地址
            glfslist: valueList.glfslist,//管理方式
            cqdwlist:valueList.cqdwlist,//管理方式
            wtdwlists: [],//委托单位
            filefileList: [],//文件列表
            fileListshandle: [],
            // 请求表头信息
            myHeaders: {
                'token': localStorage.getItem('token')
            },
            form: {
                create_name: "",
                create_name_id: "",
                create_time: "",
                current: 0,
                fcbl: "",
                fj: '',
                glfs: '',
                id: "",
                note: "",
                pageSize: 0,
                qsrq: "",
                relid: "",
                status_code: 1,
                stgldw: "",
                type: "",
                update_name: "",
                update_name_id: "",
                update_time: "",
                wtdw: "",
                zzrq: ""
            },
            wtdwform: {
                create_time: '',//创建时间 ,
                current: 1,//第几页 ,
                dwbh: '',//单位编号 ,
                dwmc: '',//单位名称 ,
                id: '',//id ,
                lxdh: '',// 联系电话 ,
                lxr: '',//联系人 ,
                pageSize: 999,//每页数量 ,
                status_code: 1,//1正常 2删除
                tght: '',//托管合同 ,
                yyzz: '',//营业执照
            },
            fileList: [],
            fromlist: [],
            projectdetail: {},
            fj: '',
            rules: {
                name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
                address: [{ required: true, message: '请输入项目地址', trigger: 'blur' }],
                beginTime: [{ type: 'date', required: true, message: '请选择开工时间', trigger: 'change' }],
                completionTime: [{ type: 'date', required: true, message: '请选择计划竣工时间', trigger: 'change' }],

                chargenameB: [{ required: true, message: '请输入乙方负责人', trigger: 'blur' }],
                phoneB: [
                    { required: true, message: '请输入乙方负责人电话', trigger: 'blur' },
                    // { type: 'number', message: '电话必须为数字值'}
                ],
                company: [{ required: true, message: '请输入乙方公司名称', trigger: 'blur' }],
                chargenameA: [{ required: true, message: '请输入甲方项目负责人', trigger: 'blur' }],
                phoneA: [
                    { required: true, message: '请输入甲方负责人电话', trigger: 'blur' },
                    // { type: 'number', message: '电话必须为数字值'}
                ]
            }
        };
    },
    methods: {
        // 创建
        submitForm() {
            var that = this
            if (this.fromlist) {
                if (this.fromlist.length != 0) {
                    let a = this.fromlist.map(res => {
                        return res.id;
                    })
                    console.log(a)
                    if (that.fj) {
                        that.form.fj = a.toString() + ',' + that.fj
                    } else {
                        that.form.fj = a.toString()
                    }
                }
            } else {
                that.form.fj = that.fj
            }
            jyglupdate(this.form).then((res) => {
                if (res.code == 200) {
                    this.$message.success('修改成功');
                    this.$router.go(-1);
                } else {
                    this.$message.error('修改失败');
                }
            });

            console.log('提交确定');
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 文件
        handleRemoves(file, fileList) {
            console.log(fileList)
            this.fileListshandle = fileList.map((res) => {
                return res.response.data.id;
            });
            this.fj = this.fileListshandle.toString()

        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file)
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists) {
            console.log(fileLists)
            this.$message.success('导入成功');
            this.fileListshandle = fileLists.map((res) => {
                console.log(res.response.data)
                return res.response.data.id;
            });
            this.fj = this.fileListshandle.toString()
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id)
            let filetype = fileType[type];
            let data = {
                fileid: id
            }
            download(data).then(res => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res)
            })
        },
        // 删除已有文件
        deletefile(index) {
            this.$confirm('确定删该文件吗？')
                .then(() => {
                    this.fromlist.splice(index, 1)
                    this.$message.success('删除成功');
                })
                .catch(() => {
                    this.$message.success('删除取消');
                });
        },
        // 委托运营详情
        jygldetail(data) {
            jygldetail(data).then((res) => {
                this.form = res.data;
                if (res.data.glfs == '委托管理') {
                    this.wtglshow = true
                } else {
                    this.wtglshow = false
                }
                this.fromlist = res.data.fj;
                console.log(this.form.fj)
            });
        },
        // 房间详情
        roomdetails(data) {
            roomdetails(data).then((res) => {
                this.projectdetail = res.data;
            });
        },
        // 楼幢详情
        builddetail(data) {
            builddetail(data).then((res) => {
                this.projectdetail = res.data;
            });
        },
        // 获取管理方式
        getvalue(value) {
            console.log(value)
            if (value == '委托管理') {
                this.wtglshow = true
            } else {
                this.wtglshow = false
            }
        },
        // 委托单位列表
        wtdwlist(data) {
            wtdwlist(data).then((res) => {
                if (res.code == 200) {
                    this.wtdwlists = res.data.records;
                }
            });
        }
    },
    created() {
        console.log('params', this.$route.params)
        let jydetail = {
            id: this.$route.params.jyglid
        }
        this.jygldetail(jydetail)
        console.log(global.httpUrl)
        if (this.$route.params.type == '1') {
            let data = {
                id: this.$route.params.id
            };
            this.roomdetails(data);
        } else if (this.$route.params.type == '2') {
            let data = {
                id: this.$route.params.id
            };
            this.builddetail(data);
        }
        this.wtdwlist(this.wtdwform)
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    font-weight: 700;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}

.detailcontent .detailitem1 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
    font-weight: 700;
    color: #008A94;
}

/* 项目文件 */
.filebox {
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.fileboxitem:hover {
    color: #7090ff;
}

.deleteitem {
    color: red;
}

.deleteitem:hover {
    color: #eeeeee;
}
</style>